<!--
  ~ Copyright [2019] [恒宇少年 - 于起宇]
  ~
  ~      Licensed under the Apache License, Version 2.0 (the "License");
  ~      you may not use this file except in compliance with the License.
  ~      You may obtain a copy of the License at
  ~
  ~          http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~      Unless required by applicable law or agreed to in writing, software
  ~      distributed under the License is distributed on an "AS IS" BASIS,
  ~      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~      See the License for the specific language governing permissions and
  ~      limitations under the License.
  ~
  -->

<!DOCTYPE html>

<html>
<head>
    <base th:href="${baseUrl}" href="/">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no,email=no">
    <meta name="theme-color" content="#42d3a5">
    <link rel="shortcut icon" href="assets/img/favicon.ico">
    <title th:text="${uiSettings.title}">ApiBoot Logging Admin - Login</title>
</head>
<body class="login">

<section class="hero is-fullheight">
    <div class="hero-body">
        <div class="container has-text-centered">
            <div class="column is-4 is-offset-4">
                <div class="box">
                    <figure class="image login--logo" style="height: 50px;width: 128px">
                        <img src="assets/img/apiboot-colorful.png">
                    </figure>
                    <h1 class="title has-text-primary">Logging Admin</h1>
                    <form method="post">
                        <input type="hidden"
                               th:if="${_csrf}"
                               th:name="${_csrf.parameterName}"
                               th:value="${_csrf.token}"/>
                        <div class="field">
                            <p class="is-medium has-text-danger" th:unless="${param.error == null}" data-i18n="login.invalid_username_or_password">
                                Invalid username or password
                            </p>
                            <p class="is-medium has-text-danger" th:unless="${param.logout == null}" data-i18n="login.logout_successful">
                                Logout successful
                            </p>
                        </div>
                        <div class="field">
                            <div class="control">
                                <input class="input is-medium" type="input" name="username" placeholder="Username"
                                    data-i18n="placeholder:login.placeholder.username" autofocus th:classappend="${param.error != null} ? is-danger">
                            </div>
                        </div>
                        <div class="field">
                            <div class="control">
                                <input class="input is-medium" type="password" name="password" placeholder="Password"
                                    data-i18n="placeholder:login.placeholder.password" th:classappend="${param.error != null} ? is-danger">
                            </div>
                        </div>
                        <div class="field" th:if="${uiSettings.rememberMeEnabled}">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="remember-me">
                                    <span data-i18n="login.remember_me"></span>
                                </label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="control">
                                <input type="submit" class="button is-block is-primary is-medium is-fullwidth"
                                       value="Login" data-i18n="value:login.button_login">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>
